<template>
  <div>
    <div v-show="!isEdit" class="p-6">
      <el-radio-group v-model="startRadio">
        <el-radio :value="1">关闭小键盘</el-radio>
        <el-radio :value="2">开启小键盘</el-radio>
      </el-radio-group>

      <!-- 小键盘 -->
      <div class="p-6">
        <!-- 第一行 -->
        <div class="flex">
          <div class="key_item">
            <p>Num</p>
            <p class="text_info">买入3%-20%</p>
            <div class="key_item_btn" @click="edit()">设</div>
          </div>
          <div class="key_item">
            <p>/</p>
            <p class="text_info">买入3%-20%</p>
            <div class="key_item_btn">设</div>
          </div>
          <div class="key_item">
            <p>*</p>
            <p class="text_info">买入3%-20%</p>
            <div class="key_item_btn">设</div>
          </div>
          <div class="key_item">
            <p>-</p>
            <p class="text_info">买入3%-20%</p>
            <div class="key_item_btn">设</div>
          </div>
        </div>

        <!-- 第二三行 -->
        <div class="flex">
          <div>
            <div class="flex" style="margin-top: 8px">
              <div class="key_item">
                <p>Num</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>/</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>*</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
            </div>
            <div class="flex" style="margin-top: 8px">
              <div class="key_item">
                <p>Num</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>/</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>*</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
            </div>
          </div>

          <div style="margin-top: 8px">
            <div class="key_item" style="height: 188px">
              <p class="text-xl">+</p>
              <p class="text_info">买入3%-20%</p>
              <div class="key_item_btn">设</div>
            </div>
          </div>
        </div>

        <!-- 第四五行 -->
        <div class="flex">
          <div>
            <div class="flex" style="margin-top: 8px">
              <div class="key_item">
                <p>Num</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>/</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>*</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
            </div>
            <div class="flex" style="margin-top: 8px">
              <div class="key_item" style="width: 188px">
                <p class="text-xl">0</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
              <div class="key_item">
                <p>,</p>
                <p class="text_info">买入3%-20%</p>
                <div class="key_item_btn">设</div>
              </div>
            </div>
          </div>
          <div style="margin-top: 8px">
            <div class="key_item" style="height: 188px">
              <p class="text-xl">Enter</p>
              <p class="text_info">买入3%-20%</p>
              <div class="key_item_btn">设</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑 -->
    <div v-show="isEdit">
      <div class="flex items-center cursor-pointer" @click="edit">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </div>
      <div class="p-6">
        <el-form
          label-width="auto"
          :model="keyInfo"
          :rules="rules"
          class="w-full"
          ref="ruleFormRef"
        >
          <el-form-item label="快捷键：" class="w-full">
            <div>111</div>
          </el-form-item>
          <el-form-item label="开启快捷键：" class="w-full">
            <el-radio-group v-model="startRadio">
              <el-radio :value="1">关闭小键盘</el-radio>
              <el-radio :value="2">开启小键盘</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="方向：" class="w-full">
            <el-select
              v-model="input2"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in buyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="价格：" prop="password" class="w-full">
            <el-select
              v-model="input2"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in 10"
                :key="item"
                :label="buyList[input2 - 1].label + item"
                :value="buyList[input2 - 1].label + item"
              />
            </el-select>

            <el-input
              v-model.number="input2"
              style="width: 150px"
              size="large"
              class="ml-4"
              placeholder="请输入百分比值"
              ><template #append>%</template></el-input
            >
          </el-form-item>
          <el-form-item label="数量：" prop="password" class="w-full">
            <el-select
              v-model="input2"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option label="可买百分比" :value="1" />
              <el-option label="可卖百分比" :value="2" />
            </el-select>

            <el-input
              v-model.number="input2"
              style="width: 150px"
              size="large"
              class="ml-4"
              placeholder="请输入百分比值"
              ><template #append>%</template></el-input
            >
          </el-form-item>
          <el-form-item class="mt-12">
            <el-button @click="" size="large" class="w-24 ml-32"
              >取消</el-button
            >
            <el-button type="primary" @click="" size="large" class="w-24"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";

const rules = {
  account: [{ required: true, message: "请输入账号", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
};
const router = useRouter();
const buyList = [
  {
    label: "买入",
    value: 1,
  },
  {
    label: "卖出",
    value: 2,
  },
  {
    label: "平仓",
    value: 3,
  },
];

const startRadio = ref(1);
const isEdit = ref(false);

const keyInfo = ref({});
const input2 = ref(1);

const edit = () => {
  isEdit.value = !isEdit.value;
};
</script>

<style lang="scss" scoped>
.key_item {
  border-radius: 8px;
  width: 90px;
  height: 90px;
  color: #6f7271;
  border: 2px solid #3b3d43;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 8px;
  text-align: center;
}
.text_info {
  font-size: 10px;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.key_item_btn {
  cursor: pointer;
  background-color: #1e2f4c;
  color: #409eff;
  font-size: 10px;
  margin-top: 4px;
  padding: 1px 10px;
  border-radius: 5px;
}
</style>
